<template>
	<view>
		<view class="header">
			<navigator url="/pages/placeholder/index?id=1" hover-class="navigator-hover">
			<view class="header-img">
				<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFit" :src="top1.img_url"></image>
			</view>
			<view class="header-title">
				<view class="header-title-content">
					<text>{{title}}</text>
				</view>
			</view>
			</navigator>
		</view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<view class="image-item" v-for="(lunbo, index) in lunboList" :key="lunbo.id">
							<swiper-item>
								<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFit" :src="lunbo.img_url" ></image>
							</swiper-item>
						</view>
					</swiper>
				</view>
			</view>
		</view>
		<view class="search">
			<view class="search-content">
				<view class="search-left">
					<uni-search-bar v-model="searchValue" cancelButton='none'></uni-search-bar>
				</view>
				<view class="search-right" @tap.stop="search">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<!-- <view class="menu-title">
			<text>省内旅游产品</text>
		</view> -->
		<view class="menu-content">
			<uni-grid :column="4" :showBorder="false"  :square="false">
				<uni-grid-item v-for="menu in menuList" :key="menu">
					<navigator :url="menu.link_url" hover-class="navigator-hover">
					<view class="menu-li-content">
						<view class="menu-li-top">
							<image class="menu-li-top-img" mode="aspectFit" :src="menu.img_url"></image>
						</view>
						<view class="menu-li-bottom">
							<text>{{menu.title}}</text>
						</view>
					</view>
					</navigator>
				</uni-grid-item>
				
			</uni-grid>
		</view>
		
		<view class="" v-for="pro in productList" :key="pro.cate_id">
			
			<view class="menu-title">
				<text>{{pro.title}}</text>
			</view>
			
			<view class="pro-content">
				<view class="pro-ul">
					<view class="pro-li" v-for="list in pro.lists" :key="list.pid" @tap.stop="redirectDetail(list.pid, pro.cate_id)">
						<view class="pro-li-father">
							<view class="pro-li-content">
								<image class="pro-li-content-img" :src="list.logo"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="menu-title">
			<text>报名热线</text>
		</view>
		
		<view class="contact">
			<view class="contact-top">
				<view class="contact-top-left">
					<image class="contact-top-img" :src="kefu.head_img"></image>
				</view>
				<view class="contact-top-right">
					<view class="contact-name">
						<text class="contact-main-name">{{kefu.username}}</text><text class="contact-main-position">客服</text>
					</view>
					<view class="contact-tel">
						<image class="contact-top-icon" src="/static/images/chat.png"></image>
						<text class="contact-desc">{{kefu.phone}}</text>
					</view>
					<view class="contact-tel" @tap.stop="getLocation">
						<image class="contact-top-icon" src="/static/images/address.png"></image>
						<text class="contact-desc">{{kefu.address}}</text>
					</view>
				</view>
			</view>
			<view class="contact-bottom">
				<view class="contact-bottom-button" @tap.stop="makePhone">
					<text>一键拨号</text>
				</view>
			</view>
			<fh-toast ref="fhToast"></fh-toast>
		</view>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: '',
				searchValue: '',
				background: ['color1', 'color2', 'color3'],
				autoplay: true,
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				lunboList: [],
				top1: [],
				menuList: [],
				productList: [],
				kefu: [],
				tuijian: 1,
				openid: '',
				longitude: '',
				latitude: ''
			}
		},
		onLoad(option) {
			let _this = this
			if(option.salesman_code){
				_this.tuijian = decodeURIComponent(option.salesman_code)
				uni.setStorageSync('salesman_code', _this.tuijian)
			}
			_this.$nextTick(function () {
				if(_this.checkLogin()){
					_this.openid = uni.getStorageSync('openid');
					_this.reloadhead()
					_this.getProList()
					_this.getKefu()
					_this.getMenuList()
				}
			})
			
		},
		methods: {
			onShareAppMessage(res) {
				//发送给朋友
				let _this = this
			    return {
			      title: _this.title,
			      path: '/pages/index/index?salesman_code=' + _this.tuijian
			    }
			},
			onShareTimeline(res){ 
				// 分享到朋友圈
				let _this = this
				return {
					title: _this.title,
					path: '/pages/index/index?salesman_code=' + _this.tuijian
				}
			},
			getLocation(){
				let _this = this
				uni.openLocation({
				    latitude: parseFloat(_this.latitude),
				    longitude: parseFloat(_this.longitude),
				    success: function () {
				        console.log('success');
				    }
				});
			},
			makePhone() {
				let _this = this
				uni.makePhoneCall({
					phoneNumber: _this.kefu.phone
				})
			},
			getMenuList() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/menu',
					method: 'GET'
				}).then(res=>{
					_this.menuList = res
				})
			},
			redirectDetail(pid, cate_id){
				if(pid != -1){
					uni.navigateTo({
						url: '/pages/product/index?pid=' + pid
					})
				}else{
					uni.navigateTo({
						url: '/pages/product/list?cate_id=' + cate_id
					})
				}
				
			},
			reloadhead() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/ad',
					method: 'GET'
				}).then(res=>{
					_this.lunboList = res.ad
					_this.top1 = res.top1
					_this.title = res.title
				})
			},
			getProList() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/other',
					method: 'GET'
				}).then(res=>{
					_this.productList = res
				})
			},
			getKefu() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/salesman?openid=' + _this.openid + '&salesman_code=' + _this.tuijian,
					method: 'GET'
				}).then(res=>{
					_this.kefu = res
					_this.longitude = res.longitude
					_this.latitude = res.latitude
				})
			},
			search: function() {
				let _this = this
				if(_this.searchValue == ''){
					_this.openToast({title:'请输入关键词'})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/search?keyword=' + _this.searchValue
				})
			},
			openToast: function({title, isHTMLString, isLoading, icon}) {
				this.$refs.fhToast.show({title, isHTMLString, isLoading, icon})
			},
			closeToast: function(){
				this.$refs.fhToast.hidden()
			}
		}
	}
</script>

<style>
.fh-title{
	font-size: 24rpx !important;
}
.header{
	width: 100%;
	height: 280rpx;
}
.header-img{
	width: 100%;
	height: 280rpx;
}
.header-title{
	width: 90%;
	height: 0;
	position: relative;
	top: -210rpx;
	left: 5%;
}
.header-title-content{
	width: 100%;
	height: 30rpx;
	font-size: 30rpx;
	text-align: center;
	color: #FFFFFF;
}
.uni-padding-wrap{
	height: 400rpx;
}
.swiper{
	height: 400rpx;
}
.search{
	padding: 20rpx;
}
.search-content{
	display: flex;
}
.search-left{
	width: 84%;
}
.search-right{
	width: 16%;
	height: 104rpx;
	line-height: 104rpx;
	text-align: center;
}
.menu-title{
	padding: 40rpx 20rpx 20rpx 40rpx;
	font-size: 34rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-weight: 700;
}
.menu-content{
	width: 100%;
	padding-top: 20rpx;
}
.menu-li-content{
	width: 100%;
	height: 200rpx;
}
.menu-li-top{
	width: 100%;
	height: 150rpx;
	text-align: center;
}
.menu-li-top-img{
	width: 120rpx;
	height: 120rpx;
}
.menu-li-bottom{
	width: 100%;
	height: 50rpx;
	font-size: 26rpx;
	line-height: 26rpx;
	text-align: center;
}
.pro-content{
	width: 94%;
	position: relative;
	left: 3%;
}
.pro-ul{
	display: flex;
	flex-wrap: wrap;
	
}
.pro-li{
	width: 33%;
	margin-top: 20rpx;
}
.pro-li-father{
	width: 90%;
	position: relative;
	left: 5%;
}
.pro-li-content{
	width: 100%;
	height: 150rpx;
	box-shadow: 1rpx 1rpx 1rpx #888888 inset;
	border-radius: 10rpx;
}
.pro-li-content-img{
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.pro-li-text{
	width: 100%;
	position: relative;
	top: -100rpx;
	color: #FFFFFF;
}
.pro-li-text-content{
	width: 100%;
	text-align: center;
	height: 30rpx;
	line-height: 30rpx;
}
.contact{
	width: 100%;
	font-size: 24rpx;
	color: #999999;
}
.contact-top{
	padding: 20rpx;
	display: flex;
}
.contact-top-left{
	width: 20%;
	height: 130rpx;
}
.contact-top-img{
	width: 100%;
	height: 100%;
}
.contact-right{
	width: 80%;
}
.contact-name{
	width: 100%;
	height: 50rpx;
	margin-left: 20rpx;
}
.contact-top-icon{
	margin-left: 20rpx;
	width: 30rpx;
	height: 30rpx;
}
.contact-tel{
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
}
.contact-desc{
	margin-left: 20rpx;
	height: 40rpx;
	line-height: 40rpx;
}
.contact-main-name{
	font-size: 28rpx;
	color: #333;
}
.contact-main-position{
	margin-left: 20rpx;
}
.contact-bottom{
	width: 100%;
	font-weight: 500;
	padding-bottom: 50rpx;
}
.contact-bottom-button{
	width: 70%;
	position: relative;
	left: 15%;
	height: 70rpx;
	background-color: #4DC269;
	color: #FFFFFF;
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 40rpx;
	line-height: 70rpx;
	font-size: 38rpx;
	border-radius: 20rpx;
	letter-spacing: 16rpx;
	font-weight: 700;
}
</style>
